import React, { Component } from 'react';
import { StyleSheet, View, Text, PixelRatio, TouchableOpacity, Image } from 'react-native';
import { GLOBAL } from '../../../../config/global';
import AntDesignIcon from 'react-native-vector-icons/AntDesign';
import navigationSeevice from '../../../../components/navigation/navigationSeevice';
import { MDMCodeCpt } from './MDMCodeCpt';
const scale = GLOBAL.SCALE;
export class ItemCpt extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    componentDidMount = () => { }
    render () {
        let { data, choice } = this.props || {};
        let { companyName, lastTransTime, corpTypeNameList, status, isFrozen, mdmCode } = data || {};
        return (
            <View style={styles.ItemBox}>
                <View style={[styles.ItemHead, styles.ItemPd, styles.ItemBorder]}>
                    <Text style={styles.ItemHeadText}>上次交易时间：{lastTransTime || ''}</Text>
                </View>
                <View style={[styles.ItemBody, styles.ItemPd, styles.ItemBorder]}>
                    <TouchableOpacity style={styles.ItemBodyUp} onPress={() => { navigationSeevice.navigate('projectDetail', { data, choice }) }}>
                        <View style={styles.titleBox}>
                            {!mdmCode ? <MDMCodeCpt /> : null}
                            {isFrozen === "1" ? <Image style={styles.icon} source={require('../../../../imgs/customer/suoding.png')} /> : null}
                            {status === "ABANDONED" ? <Image style={styles.icon} source={require('../../../../imgs/customer/disable.png')} /> : null}
                            <Text style={[styles.ItemBodyTitle]}>{companyName || '-'}</Text>
                        </View>
                        <AntDesignIcon name='caretright' style={styles.ItemBodyLeft} />
                    </TouchableOpacity>
                    <View style={styles.ItemBodyTagView}>
                        {corpTypeNameList && corpTypeNameList.map((item, index) => {
                            return (<View style={styles.ItemBodyTagBox} key={index}><Text style={styles.ItemBodyTag}>{item}</Text></View>)
                        })}
                    </View>
                </View>
                <View style={[styles.ItemBottom, styles.ItemPd]}>
                    <TouchableOpacity style={styles.ItemBtn} onPress={() => { navigationSeevice.navigate('projectDetail', { data, choice }) }}>
                        <Text style={[styles.ItemBtnText]}>申请认领</Text>
                    </TouchableOpacity>
                </View>
            </View >
        )
    }
}

const styles = StyleSheet.create({
    ItemBox: {
        marginLeft: 15 * scale,
        marginRight: 15 * scale,
        backgroundColor: '#ffffff',
        marginTop: 20 * scale,
        borderRadius: 8 * scale
    },
    ItemBorder: {
        borderBottomColor: '#E3E7F0',
        borderBottomWidth: 2 * scale / PixelRatio.get(),
        flexDirection: 'row',
    },
    ItemHead: {
        height: 30 * scale,
        justifyContent: 'flex-end',
        alignItems: 'center'
    },
    ItemPd: {
        paddingLeft: 15 * scale,
        paddingRight: 15 * scale
    },
    ItemHeadText: {
        fontSize: 12 * scale,
        color: '#E02020'
    },
    ItemBody: {
        flexDirection: 'column',
        paddingBottom: 11 * scale,
        flexWrap: 'wrap'
    },
    ItemBodyUp: {
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingTop: 10 * scale,
        paddingBottom: 15 * scale
    },
    ItemBodyTitle: {
        fontSize: 13 * scale,
        color: '#000',
        fontWeight: 'bold'
    },
    ItemBodyLeft: {
        fontSize: 12 * scale
    },
    ItemBodyTagView: {
        flexDirection: 'row',
        // flexWrap: 'wrap'
    },
    ItemBodyTagBox: {
        marginBottom: 5 * scale,
        marginRight: 14 * scale,
        paddingLeft: 10 * scale,
        paddingRight: 10 * scale,
        paddingTop: 5 * scale,
        paddingBottom: 5 * scale,
        borderRadius: 10 * scale,
        backgroundColor: 'rgba(228,232,241,.5)',
    },
    ItemBodyTag: {
        fontSize: 10 * scale,
        color: '#000',
    },
    ItemBottom: {
        height: 50 * scale,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center'
    },
    ItemBtn: {
        width: 84 * scale,
        height: 29 * scale,
        borderColor: '#0E7FFD',
        borderWidth: 1 * scale,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 16 * scale
    },
    ItemBtnText: {
        fontSize: 12 * scale,
        color: '#0E7FFD',
    },
    ItemBtnTextActive: {
        // color: '#BEC1C4',
    },
    ItemBtnActive: {
        // borderColor: '#BEC1C4',
    },
    icon: {
        height: 13 * scale,
        width: 13 * scale,
        marginRight: 5 * scale
    },
    titleBox: {
        flexDirection: 'row',
        alignItems: 'center'
    }
})